<template>
  <transition name="modal" tag="div">
    <div class="modal" v-show="show" transition="fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <!--内容区域-->
          <div class="modal-body border-bottom">
            <div class="desc">{{content.title}}</div>
            <div class="desc-small">{{content.content}}</div>
          </div>
          <!--尾部,操作按钮-->
          <div class="modal-footer">
            <a href="javascript:void(0)" class="button border-right cancel" @click="handleClick('cancel')">{{content.cancelButton}}</a>
            <a href="javascript:void(0)" class="button confirm" @click="handleClick('confirm')">{{content.confirmButton}}</a>
          </div>
        </div>
      </div>
    </div>
    <!-- <div v-show="show" class="modal-backup"></div> -->
  </transition>
</template>

<style lang="stylus" scoped>
  @import "~style/varibles.styl"
  input:disabled
    background-color :transparent
  .nowrap
    white-space :nowrap
  .modal-enter-active
    animation: modal-in .15s linear
  .modal-leave-active
    animation: modal-in .15s reverse linear
  @keyframes modal-in
    0%
      transform: translateY(-20px) rotateX(-35deg)
      opacity :0
    50%
      opacity :0.5
    100%
      transform: translateY(0) rotateX(0)
      opacity :1
  .modal
    width: 100%
    height: 100%
    position: fixed
    left: 0
    top: 0
    right: 0
    bottom: 0
    z-index: 1001
    outline: 0
    overflow: hidden
    background: rgba(0,0,0,.4)
  .modal-dialog
    position: absolute
    left: 50%
    top: 50%
    transform: translate(-50%, -50%)
    width: 85.33%
    background: #fff
    border-radius: .2rem
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5)
    z-index: 1003
    .modal-content

      color :#333
      .modal-body
        padding .4rem
        .desc
          font-size :.36rem
          color :#333
          font-weight :bold
          text-align :center
        .desc-small
          font-size :.3rem
          color :#666
          margin-top .34rem
          text-align center
          line-height: .4rem
          margin-bottom .2rem
    .modal-footer
      text-align: center
      display :flex
      a
        display: inline-block
        color #007AFF
        font-size .3rem
        padding: 5.6% 9.73%
        border-radius: .04rem
        width :100%
      .cancel
        color #999
      .confirm
        color $textButton
  .close
    position absolute
    bottom 10%
    left 50%
    transform translateX(-50%)
    img
      width .56rem
      height  .56rem
  .modal-backup
    width: 100%
    height: 100%
    position: fixed
    top: 0
    right: 0
    bottom: 0
    left: 0
    z-index: 1000
    background: rgba(0, 0, 0, 0.5)

</style>

<script>
export default {
  name: 'signOut',
  data () {
    return {
      show: false
    }
  },
  props:{
    content:{
      type:Object,
      default:null
    }
  },
  methods: {
    confirm () {
      this.show = true
      this.promise = new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
      return this.promise
    },
    handleClick (type) {
      this.show = false
      this.resolve(type)
    }
  }
}
</script>
